<template>
	<view class="page">
		<view class="page-box">
			<view class="btnBox">
				<image class="tex" src="@/static/login/code.png" mode=""></image>

				<view class="choose-nickname-row">
					<input v-model="form.mobile" type="number" placeholder="请输入手机号"  />
				</view>
				<view class="choose-nickname-row" style="display: flex;justify-content: space-between;">
					<input v-model="form.code"  type="number" placeholder="请输入短信验证码" style="" />
					<view class='codeinput' @tap.stop="getCode"  > 获取验证码 </view>
				</view>
				<view class="choose-nickname-row">
					<input v-model="form.newpassword"  type="text" placeholder="请设置登录密码" password />
				</view>
				<view class="choose-nickname-row">
					<input v-model="form.password"  type="text" placeholder="请再次输入登录密码" password/>
				</view>
			</view>

			<view class="button" size="mini" @tap.stop="toSubmit">确认</view>
		</view>
	</view>
</template>
<script>
	import {
		resetpwd,
		mySendSms
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				form: {
					newpassword: '',
					password: '',
					mobile: '',
					code: ''
				},
			};
		},
		created() {
			
		},
		methods: {
			// 提交
			toSubmit() {
				if(!this.form.mobile){
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
				  uni.showToast({
				    title: "手机格式不正确",
				    icon: "none",
				  });
				  return;
				}
				if(!this.form.code){
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
					});
					return;
				}
				if(!this.form.password){
					uni.showToast({
						title: "密码不能为空",
						icon: "none",
					});
					return;
				}
				if(!this.form.newpassword){
					uni.showToast({
						title: "请再次确认密码",
						icon: "none",
					});
					return;
				}
				
				if(this.form.password != this.form.newpassword ){
					uni.showToast({
						title: "两次密码不一致",
						icon: "none",
					});
					return;
				}
				delete this.form.password
				resetpwd(this.form).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						uni.setStorageSync('userInfo',res.data.userinfo)
						uni.setStorageSync('token',res.data.userinfo.token)
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/bind/login'
							})
						}, 1000)
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});
			},
			// 获取验证码
			getCode() {
				if (!this.form.mobile) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					});
					return;
				}
				if (this.form.mobile.length != 11) {
					uni.showToast({
						title: "手机号格式有误",
						icon: "none",
					});
					return;
				}
				mySendSms({
					mobile: this.form.mobile,
					event: "resetpwd",
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background: url(@/static/bg.png);
		background-size: 100% 100%;
		height: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;

		&-box {
			height: 800rpx;
			margin: 240rpx auto;
			width: 640rpx;
			display: flex;
			flex-direction: column;
			justify-items: center;

			>view {
				margin-bottom: 60rpx;
			}

			.btn {
				font-size: 28rpx;
				background-color: #fff;
				border: 1rpx solid #dddddd;
				padding: 20rpx;
				border-radius: 8rpx;

				&:active {
					background-color: #f2f2f2;
				}
			}
		}
	}

	.button {
		background-color: #EBEBEB;
		width: 100%;
		color: #909090;
		border: 2rpx solid #EBEBEB;
		border-radius: 50rpx;
		height: 86rpx;
		text-align: center;
		line-height: 86rpx;
		font-size: 30rpx;
	}

	.btnBox {
		width: 100%;
		height: 760rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		.tex {
			width: 250rpx;
			height: 86rpx;
			margin-bottom: 40rpx;
		}

		.choose-nickname-row {
			width: 100%;
			height: 7%;
			text-align: left;
			padding: 26px 2px 8px;
			font-size: 30rpx;
			margin: 0 auto;
			border-bottom: 3rpx solid #F2F2F2;
			vertical-align: center;
			/deep/ .input{
				color: #807E7E;
			}
			.codeinput {
				color: #466EC5;
				width: 200rpx;
				text-align: right;
			}
		}

	}
</style>